<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Login</title>
	<link rel="stylesheet" href="bootstrap.min.css">
	<link type="image/x-icon" rel="shortcut icon" href="favicon.ico" />
	<style>
		#indexPng{
			height: 30%;
			width: 30%;
		}
		body{
			/* position:absolute; 
			background-attachment: fixed;*/
			background-size: 100%;
			background-image: url('login.jpg');
			background-repeat: no-repeat;
			background-position: 16% 16%;
		}
	</style>
</head>
<body>
	<div class="container">
		<br><br><br><br><br><br><br><br><br><br><br><br><br><br>
		<div class="row" align="center"><img id="indexPng" src="index.png" alt="Spark Login" /></div>
		<!-- <div class="row col-md-offset-4"><h1><strong>Hadoop & Spark MLlib</strong></h1></div> -->
		<br>
		<div class="form col-md-4 col-md-offset-4" align="center">
			<form id="login">
				<div class="form-group">
					<label for="account">Account</label>
					<input id="account" name="account" type="text" class="form-control"/>
				</div>
				<div class="form-group">
					<label for="password">Password</label>
					<input id="password" name="password" type="password" class="form-control"/>
				</div>
			</form>
			<button id="loginButton" class="btn btn-success">Login</button>
		</div>
	</div>
	<script src="jquery-1.11.3.min.js"></script>
	<script src="bootstrap.min.js"></script>
	<script>
		var base=".", language = "en_US";
	</script>
	<script src="toast.js"></script>
	<script>
		function TurnTo(){
			window.location.href = "index.html";
		}
		$(function(){
			$('#loginButton').click(function(){
				var data = $('#login').serialize();
				$.ajax({
					url:"login.php?"+Math.random(),
					type:"post",
					data:data,
					success:function(data){
						if(data == '1'){
							Toast.success("登陆成功！为您跳转至主页...");
							setInterval(TurnTo, 1500);	
						}
						else if(data == "0"){
							Toast.error("信息填写错误，请重新登陆！");
						}
					},
					error:function(){
						Toast.error("登陆失败！");
					}
				});
			});
		});
	</script>
</body>
</html>